<template>
	<view>
		<!-- 页头 -->
		<view class="recharge-head">
			<view class="recharge-head-img">
				<image :src='avatarUrl' mode=""></image>
				<text>ID：{{id}}</text>
			</view>
			<view class="recharge-head-text">
				余额：{{book_currency}} K币
			</view>
		</view>
		<!-- 金额 -->
		<view class="recharge-view">
			<view class="recharge-view-head">
				请选择充值金额
			</view>
			<view class="recharge-view-money">
				<view v-for="(item,index) in rechargeList" :key="index" @click="select(index)"
					:class="selectIndex == index ? 'money-view money-view-select':'money-view'">
					<view class="money-view-money">￥{{item.name}}</view>
					<view v-if="item.type == 2" class="money-view-annualPass">
						<text>会员年卡无限看</text>
					</view>
					<view v-else class="money-view-givemoney">
						<text>{{item.original_currency}}K币</text>
						<text v-if="item.send_currency > 0">送{{item.send_currency}}K币</text>
					</view>

					<view v-if="item.send_title"
						:class="item.type == 2 ? 'money-view-giveIdentifying giveIdentifying-annualPass':'money-view-giveIdentifying'">
						<text>{{item.send_title}}</text>
					</view>
					<view v-if="item.label" class="money-view-label">
						<text>{{item.label}}</text>
					</view>
				</view>
			</view>
			<view class="recharge-submit" @click="goCost">立即支付</view>
		</view>
		<!-- 页尾 -->
		<view class="recharge-statement">
			<view>1.K币和会员属于虚拟商品，已经 购买不得退换。</view>
			<view>2.未满18岁未成年应在监护人指导下进行付费操作。</view>
			<view>3.K币和 会员仅在本小程序生效使用，充值后可直接观看</view>
		</view>
	</view>
</template>

<script>
	import {
		getMoneyList,
		getBookorder
	} from '@/module/index.js'
	export default {
		data() {
			return {
				rechargeList: [],
				selectIndex: -1,
				book_currency: 0,
				id: "",
				avatarUrl: ""
			}
		},
		onLoad(options) {
			this.book_currency = options.book_currency || 0;
			this.id = options.id;
			this.getMoneyList()
			const login = uni.getStorageSync('login')
			if (!login.avatar) {
				this.avatarUrl =
					'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
			} else {
				this.avatarUrl = login.avatar
			}
		},
		methods: {
			select(index) {
				this.selectIndex = index
			},
			goCost() {
				if (this.selectIndex == -1) {
					uni.showToast({
						title: '请选择充值金额！',
						icon: "none"
					})
					return
				}
				this.getBookorder(this.rechargeList[this.selectIndex])
			},
			getMoneyList() {
				getMoneyList().then((res) => {
					if (res.code === 200) {
						this.rechargeList = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getBookorder(item) {
				let obj = {
					total_fee: item.recharge_price * 100,
					name: item.name,
					number: item.sum_currency,
					type:item.type,
					id:item.id,
					// video_id: this.video_id
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						var record_id = res.data.pay_record_id
						if (uni.getStorageSync('environment') == 'official_account') {
							// 公众号调起微信支付
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": res.data.appId, //公众号ID，由商户传入     
									"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
									"nonceStr": res.data.nonceStr, //随机串     
									"package": res.data.package,
									"signType": "MD5", //微信签名方式：     
									"paySign": res.data.paySign //微信签名 
								},
								function(res) {
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										// 使用以上方式判断前端返回,微信团队郑重提示：
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										uni.showToast({
											title: `支付成功`,
											icon: 'success'
										});
									} else if (res.err_msg == 'get_brand_wcpay_request:fail' || res.err_msg ==
										'get_brand_wcpay_request:cancel') {
										uni.showToast({
											title: `支付失败`,
											icon: 'none'
										});
									} else {
										uni.showToast({
											title: res.err_msg,
											icon: 'none'
										});
									}
								});
							return
						}
						uni.requestPayment({
							orderInfo: res.data.data,
							service: 5,
							success(res) {
								if (res.code == 0) {
									uni.showToast({
										title: `支付成功`,
										icon: 'success'
									});
									let stoTimer = setTimeout(() => {
										clearTimeout(stoTimer)
										stoTimer = null
										uni.navigateBack({
											delta: 1,
										})
									}, 2500)
								} else {
									switch (res.code) {
										case 1:
											uni.showToast({
												title: `支付超时`,
												icon: 'none'
											});
											break;
										case 2:
											uni.showToast({
												title: `支付失败`,
												icon: 'none'
											});
											break;
										case 3:
											uni.showToast({
												title: `支付关闭`,
												icon: 'none'
											});
											break;
										case 4:
											uni.showToast({
												title: `支付取消`,
												icon: 'none'
											});
											break;
										default:
											uni.showToast({
												title: `支付异常`,
												icon: 'none'
											});
									}
								}
							},
							fail(err) {
								switch (err.errMsg) {
									case 10000:
										uni.showToast({
											title: `支付失败`,
											icon: 'none'
										});
										break;
									case 10001:
										uni.showToast({
											title: `调起微信失败`,
											icon: 'none'
										});
										break;
									case 10002:
										uni.showToast({
											title: `微信未安装`,
											icon: 'none'
										});
										break;
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #ececec;
	}
</style>
<style scoped lang="scss">
	.recharge-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		// box-shadow: 0rpx 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
		background-color: #ffffff;

		.recharge-head-img {
			display: flex;
			align-items: center;

			>image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}

			>text {
				font-size: 26rpx;
				font-weight: 600;
			}
		}

		.recharge-head-text {
			font-size: 26rpx;
			font-weight: 600;
		}
	}

	.recharge-view {
		background-color: #ffffff;
		margin-top: 1rpx;
		padding: 20rpx 30rpx;
		letter-spacing: 1rpx;

		.recharge-view-head {
			margin: 20rpx 0;
			font-size: 22rpx;
			font-weight: 600;
			margin-bottom: 35rpx;
		}

		.recharge-view-money {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.money-view {
				width: 46%;
				height: 180rpx;
				border-radius: 30rpx;
				background-color: #F5F5F5;
				margin-bottom: 30rpx;
				position: relative;
				border: 2rpx solid #F5F5F5;
				box-shadow: 2rpx 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);

				.money-view-money {
					margin-top: 90rpx;
					transform: translateY(-100%);
					// margin-left: 20rpx;
					font-size: 38rpx;
					text-align: center;
					font-weight: 800;
					color: #000000;
				}

				.money-view-annualPass {
					transform: translateY(-120%);
					// margin-left: 20rpx;
					text-align: center;

					>text {
						font-size: 24rpx;
						font-weight: 600;
						color: #d81e06;
					}
				}

				.money-view-givemoney {
					transform: translateY(-120%);
					// margin-left: 20rpx;
					text-align: center;

					>text {
						font-size: 24rpx;
						font-weight: 600;
						color: #8B8989;
					}

					>text+text {
						margin-left: 15rpx;
						// font-weight: 600;
						color: #8B8989;
					}
				}

				.money-view-giveIdentifying {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					padding: 8rpx 10rpx;
					border-radius: 0 0 30rpx 30rpx;
					color: #d81e06;
					font-weight: 600;
					// background-color: #d81e06;
					font-size: 24rpx;
				}

				.giveIdentifying-annualPass {
					background-color: #d81e06;
					color: #ffffff;
				}

				.money-view-label {
					position: absolute;
					top: 0;
					right: 0;
					padding: 8rpx 15rpx;
					border-radius: 0 25rpx 0 30rpx;
					background-color: #d81e06;
					color: #ffffff;
					font-size: 20rpx;
					// font-weight: 600;
				}
			}

			.money-view-select {
				border: 2rpx solid #d81e06;
				background-color: rgba(255, 248, 220, 0.5);
			}
		}

		.recharge-submit {
			// background-color: #d81e06;
			background: linear-gradient(to bottom, #FF6347, #d81e06);
			padding: 30rpx 0;
			text-align: center;
			color: #ffffff;
			border-radius: 30rpx;
			letter-spacing: 3rpx;
			font-weight: 600;
			margin: 20rpx 0;
		}
	}

	.recharge-statement {
		padding: 30rpx;
		font-size: 24rpx;
		color: #8B8989;

		>view {
			margin-bottom: 20rpx;
			letter-spacing: 1rpx;
		}
	}
</style>